<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<div>insertAdjacentText</div>
<script>
    let ul = document.querySelector("ul");
    let liNew = document.createElement("li");
    liNew.textContent = "1.5";
    // ul.appendChild()：只支持Node
    ul.insertBefore(liNew, ul.lastElementChild)
    ul.append(liNew.cloneNode(true)); //支持字符和Node
    ul.prepend(liNew.cloneNode(true));
    ul.after(liNew.cloneNode(true));
    ul.before(liNew.cloneNode(true));

    /*
        beforebegin：兄弟节点，顶部或左边
        afterend：兄弟节点，底部或右边
        afterbegin：子节点，顶部或左边
        beforeend：子节点，底部或右边
     */
    let div = document.querySelector("div");
    // div.insertAdjacentText("beforebegin", "兄弟节点，顶部或左边");
    // div.insertAdjacentText("afterend", "兄弟节点，底部或右边");
    // div.insertAdjacentText("afterbegin", "子节点，顶部或左边");
    // div.insertAdjacentText("beforeend", "子节点，底部或右边<input type='button'>");
    // div.insertAdjacentHTML("beforebegin", "兄弟节点，顶部或左边");
    // div.insertAdjacentHTML("afterend", "兄弟节点，底部或右边");
    // div.insertAdjacentHTML("afterbegin", "子节点，顶部或左边");
    // div.insertAdjacentHTML("beforeend", "子节点，底部或右边<input type='button' value='按钮'>");
    let btn = document.createElement("button");
    btn.textContent = "按钮";
    div.insertAdjacentElement("beforebegin", btn);
    div.insertAdjacentElement("afterend", btn.cloneNode(true));
    div.insertAdjacentElement("afterbegin", btn.cloneNode(true));
    div.insertAdjacentElement("beforeend", btn.cloneNode(true));
</script>
</body>
</html>